import React, { useState } from 'react';
import { Form, Select, Space } from 'antd';
import './index.less';

//条件检索
function MSelect(params) {
  const [value] = useState('');
  const [options] = useState([
    {
      value: '选项1',
      label: '黄金糕',
    },
    {
      value: '选项2',
      label: '双皮奶',
    },
    {
      value: '选项3',
      label: '蚵仔煎',
    },
    {
      value: '选项4',
      label: '龙须面',
    },
    {
      value: '选项5',
      label: '北京烤鸭',
    },
  ]);
  const { Option } = Select;
  const [form] = Form.useForm();
  const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
  };
  const onFinish = values => {
    console.log(values);
  };
  const onGenderChange = values => {
    console.log(values);
  };
  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({
      note: 'Hello world!',
      gender: 'male',
    });
  };
  return (
    <div className="select_wrap">
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} labelAlign="left">
        <Form.Item name="分类" label="分类" rules={[{  }]}>
            <Select placeholder="分类" onChange={onGenderChange} allowClear>
              <Option value="male">male</Option>
              <Option value="female">female</Option>
              <Option value="other">other</Option>
            </Select>
        </Form.Item>
      </Form>
    </div>
  );
}
//sku选择
function SkuSelect(params) {
  return (
    <div className="sku_select_wrap">
      <span>综合</span>
      <span>价格</span>
      <span>销量</span>
    </div>
  );
}
function ShopList(params) {
  return (
    <div>
      <div className="shop_list"></div>
      <div className="shop_list"></div>
      <div className="shop_list"></div>
      <div className="shop_list"></div>
      <div className="shop_list"></div>
      <div className="shop_list"></div>
      <div className="shop_list"></div>
      <div className="shop_list"></div>
      <div className="shop_list"></div>
      <div className="shop_list"></div>
      <div className="shop_list"></div>
      <div className="shop_list"></div>
      <div className="shop_list"></div>
    </div>
  );
}
export default () => {
  return (
    <div className="content">
      <MSelect />
      <SkuSelect />
      <ShopList />
    </div>
  );
};
